<template>
    <div v-if="editStatus" class="m-edit-modal">
        <div class="header">
            新增问题
            <span @click="close"><Icon type="close-round"></Icon></span>
        </div>
        <div class="m-content">
            <Form ref="myData"  :label-width="100" style="width: 900px"
                  :inline="true">
                <FormItem label="标题:" prop="posts_title">
                    <Input type="text" v-model="formData.title" placeholder="请输入..." style="width: 800px"/>
                </FormItem>
                <FormItem label="说明:" prop="desc">
                    <Input type="textarea" v-model="formData.remark" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..." style="width: 800px"></Input>
                </FormItem>
                <Row>
                    <Col span="6">
                        <FormItem label="类型" prop="posts_source">
                            <Select style="width: 300px" v-model="formData.type">
                                <Option value="0">单选</Option>
                                <Option value="1">多选</Option>
                                <Option value="2">填写</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="6">

                    </Col>
                </Row>
                <Row>
                    <FormItem label="是否必答" prop="posts_source">
                        <RadioGroup v-model="formData.direction" type="button" size="large">
                            <Radio label="Y">是</Radio>
                            <Radio label="N">否</Radio>
                        </RadioGroup>
                    </FormItem>
                </Row>

                <FormItem>
                    <Button type="primary" @click="addSelectTb">新增选项</Button>
                </FormItem>
                <Row>
                    <Col span="12">
                        <table width="880px" style="text-align: center;border:1px solid #dfdfdf">
                            <tr>
                                <th style="border-right: 1px solid #dfdfdf">选项</th>
                                <th>结果</th>
                            </tr>
                            <tr v-for="arr in selectArr">
                                <td style="border-right: 1px solid #dfdfdf">
                                    <input v-model="arr.title" type="text" placeholder="请输入..." style="width: 100%">
                                </td>
                                <td>
                                    <input type="text" v-model="arr.content" v-on:blur="getSelectArr" placeholder="请输入..." style="width: 100%">
                                </td>
                            </tr>
                        </table>
                    </Col>
                </Row>
                <FormItem>
                    <Button type="primary" @click="submit()" style="margin-top: 20px">保存</Button>
                </FormItem>
            </Form>
        </div>
    </div>
</template>
<script>
    import qs from 'qs'
    import API from '../../config/api'

    export default {
        props: ['editStatus', 'paperId', 'questionId'],
        data() {
            return {
                formData:{
                    paperId: this.paperId,
                    title: '',
                    type: '0', //类型(0:单选,1:多选,2:填写)
                    remark: '',
                    direction: 'Y', //是否必答（Y/N）
                    scontent: '', //选项内容
                },
                selectArr:[{
                    title: '',
                    content: ''
                }]
            }
        },
        methods: {
            close() {
                this.clearParams();
                this.$emit('closeModal')
            },
            addSelectTb(){
                let tb = {
                    title: '',
                    content: ''
                };
                this.selectArr.push(tb)
            },
            getSelectArr(){
                this.formData.scontent = JSON.stringify(this.selectArr)
            },
            submit(){
                if (this.questionId) {
                    this.updateQuestion()
                }else{
                    this.handleSubmit()
                }
            },
            updateQuestion(){
                if (!this.formData.title) {
                    this.$Message.info('请输入问题标题');
                    return ;
                }
                let formData = new FormData();
                formData.append('paperId', this.paperId);
                formData.append('title', this.formData.title);
                formData.append('type', this.formData.type);
                formData.append('remark', this.formData.remark);
                formData.append('direction', this.formData.direction);
                formData.append('scontent', this.formData.scontent);
                formData.append('id', this.questionId);
                this.axios.post(API.QUESTI0N_UPDATE, formData).then(res=>{
                    let data = res.data;
                    if (data.code == 200){
                        this.clearParams()
                        this.$emit('closeModal')
                    } else{
                        this.$Message.info(data.msg)
                    }
                })
            },
            handleSubmit(){
                if (!this.formData.title) {
                    this.$Message.info('请输入问题标题');
                    return ;
                }
                let formData = new FormData();
                formData.append('paperId', this.paperId);
                formData.append('title', this.formData.title);
                formData.append('type', this.formData.type);
                formData.append('remark', this.formData.remark);
                formData.append('direction', this.formData.direction);
                formData.append('scontent', this.formData.scontent);
                this.axios.post(API.QUESTION_ADD, formData).then(res=>{
                    let data = res.data;
                    if (data.code == 200){
                        this.clearParams()
                        this.$emit('closeModal')
                    } else{
                        this.$Message.info(data.msg)
                    }
                })
            },
            clearParams(){
                this.formData = {
                        paperId: this.paperId,
                        title: '',
                        type: '0', //类型(0:单选,1:多选,2:填写)
                        remark: '',
                        direction: 'Y', //是否必答（Y/N）
                        scontent: '', //选项内容
                }
                this.selectArr = [{
                    title: '',
                    content: ''
                }]
            },
            getQuestionInfoById(id){
                let data = {
                    id: id
                };
                this.axios.post(API.QUESTION_INFO, qs.stringify(data)).then(res=>{
                    let data = res.data;
                    if (data.code == 200){
                        this.formData = data.data;
                        this.selectArr = JSON.parse(this.formData.scontent);

                        delete this.formData.createTime;
                        delete this.formData.updateTime;
                        delete  this.formData.createUser;
                        delete  this.formData.updateUser
                    }
                })
            }
        },
        computed: {

        },
        watch:{
            'paperId': function (newVal, oldVal) {
                this.formData.paperId = newVal;
            },
            'editStatus': function (newVal, oldVal) {
                if (this.questionId) {
                    //修改问题时；
                    this.getQuestionInfoById(this.questionId)
                }
            }
        },
        created() {

        }
    }
</script>
<style lang='scss' scoped>
    .m-edit-modal {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: #fff;
        z-index: 100;

        .header {
            background-color: #f8f8f9;
            height: 45px;
            line-height: 45px;
            font-size: 16px;
            padding-left: 25px;
            padding-right: 5px;
            color: #000;
            box-shadow: 1px 1px 1px rgba(220, 172, 172, .5);

            span {
                float: right;
                padding: 0 20px;
                cursor: pointer;
            }

        }
        .m-content {
            margin-top: 20px;
            padding-bottom: 100px;
            overflow-y: auto;
        }

        .list-header {
            height: 45px;
            color: #333;
            line-height: 45px;
        }

        .list-row {
            padding-left: 100px;
            font-size: 14px;
            line-height: 40px;
        }
        table{
            margin-left: 40px;
        }
        th, td{
            height: 35px;
        }
        td{
            border-top:1px solid #dfdfdf;
        }
        input{
            outline: none;
            border: 0;
            text-align: center;
        }
    }
</style>
